<template>
	<div class="publicformview">
		<el-form label-width='100px' :inline="true" :disabled='blockType==3' :model="listQuery" size="mini" ref="searchForm"
			style="margin-top: 20px;">
			<el-row :gutter="24">
				<el-col :span="9">
					<el-form-item label="结构：" prop="structure">
						<el-select v-model="listQuery.structure" @change="jiegouChange" value-key="detail">
							<div v-for="(item,index) in jiegouList">
								<el-option :label="item.detail" :value="item" :key="index"></el-option>
							</div>
						</el-select>
						<el-input disabled style="margin-left: 4px;" v-model="listQuery.structurescore"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="9">
					<el-form-item label="设备：" prop="facility">
						<el-select v-model="listQuery.facility" @change="shebeiChange" value-key="detail">
							<div v-for="(item,index) in shebeiList">
								<el-option :label="item.detail" :value="item" :key="index"></el-option>
							</div>
						</el-select>
						<el-input disabled style="margin-left: 4px;" v-model="listQuery.facilityscore"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="基本分数：" prop="basescore">
						<el-input disabled v-model="listQuery.basescore"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="9">
					<el-form-item label="地面：" prop="ground">
						<el-select v-model="listQuery.ground" @change="dimianChange" value-key="detail">
							<div v-for="(item,index) in dimianList">
								<el-option :label="item.detail" :value="item" :key="index"></el-option>
							</div>
						</el-select>
						<el-input disabled style="margin-left: 4px;" v-model="listQuery.groundscore"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="9">
					<el-form-item label="楼层：" prop="floor">
						<el-select v-model="listQuery.floor" @change="loucengChange" value-key="detail">
							<div v-for="(item,index) in loucengList">
								<el-option :label="item.detail" :value="item" :key="index"></el-option>
							</div>
						</el-select>
						<el-input disabled style="margin-left: 4px;" v-model="listQuery.floorscore"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="单位分数：" prop="unitscore">
						<el-input disabled v-model="listQuery.unitscore"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="9">
					<el-form-item label="内墙：" prop="wall">
						<el-select v-model="listQuery.wall" @change="neiqiangChange" value-key="detail">
							<div v-for="(item,index) in neiqiangList">
								<el-option :label="item.detail" :value="item" :key="index"></el-option>
							</div>
						</el-select>
						<el-input disabled style="margin-left: 4px;" v-model="listQuery.wallscore"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="9">
					<el-form-item label="朝向：" prop="facingdirection">
						<el-select v-model="listQuery.facingdirection" @change="caoxiangChange" value-key="detail">
							<div v-for="(item,index) in caoxiangList">
								<el-option :label="item.detail" :value="item" :key="index"></el-option>
							</div>
						</el-select>
						<el-input disabled style="margin-left: 4px;" v-model="listQuery.facingdirectionscore"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="分值：" prop="unitvalue">
						<el-input disabled v-model="listQuery.unitvalue"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="9">
					<el-form-item label="顶棚：" prop="roof">
						<el-select v-model="listQuery.roof" @change="dingpengChange" value-key="detail">
							<div v-for="(item,index) in dingpengList">
								<el-option :label="item.detail" :value="item" :key="index"></el-option>
							</div>
						</el-select>
						<el-input disabled style="margin-left: 4px;" v-model="listQuery.roofscore"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="9">
					<el-form-item label="地级：" prop="addresslevel">
						<el-select v-model="listQuery.addresslevel" @change="dijiChange" value-key="detail">
							<div v-for="(item,index) in dijiList">
								<el-option :label="item.detail" :value="item" :key="index"></el-option>
							</div>
						</el-select>
						<el-input disabled style="margin-left: 4px;" v-model="listQuery.livingaddresslevelscore"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="单位租金：" prop="unitrentprice">
						<el-input disabled v-model="listQuery.unitrentprice"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="9">
					<el-form-item label="门窗：" prop="doorwin">
						<el-select v-model="listQuery.doorwin" @change="menchaungChange" value-key="detail">
							<div v-for="(item,index) in  menchuangList">
								<el-option :label="item.detail" :value="item" :key="index"></el-option>
							</div>
						</el-select>
						<el-input disabled style="margin-left: 4px;" v-model="listQuery.doorwinscore"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="9">
					<el-form-item label="澡盆：" prop="bathtub">
						<el-select v-model="listQuery.bathtub" @change="zaopenChange" value-key="detail">
							<div v-for="(item,index) in zaopenList">
								<el-option :label="item.detail" :value="item" :key="index"></el-option>
							</div>
						</el-select>
						<el-input disabled style="margin-left: 4px;" v-model="listQuery.bathtubscore"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="租定金额：" prop="rentprice">
						<el-input disabled v-model="listQuery.rentprice"></el-input>
					</el-form-item>
				</el-col>

			</el-row>
		</el-form>
		<div class="bottomTop" v-if="blockType!=3">
			<el-button type="primary" size="mini" @click="handleAddUser">保存</el-button>
		</div>
	</div>
</template>

<script>
	import {
		addRoom,
		roomDetails,
		updRoom
	} from '@/api/industry'
	export default {
		props: {
			blockType: String,
			roomid: String
		},
		name: 'canquanqingkuang',
		data() {
			return {
				listQuery: {
					structurescore: '',
					structure: '',
					facilityscore: '',
					facility: '',
					basescore: 100,
					groundscore: '',
					ground: '',
					floorscore: '',
					floor: '',
					unitscore: '',
					wallscore: '',
					wall: '',
					facingdirectionscore: '',
					facingdirection: '',
					unitvalue: 0.0241,
					roofscore: '',
					roof: '',
					livingaddresslevelscore: '',
					addresslevel: '',
					unitrentprice: '',
					doorwinscore: '',
					doorwin: '',
					bathtubscore: '',
					bathtub: '',
					rentprice: ''
				},
				total: 0,
				options: [{
					key: '1'
				}],
				listLoading: false,
				dialogVisible: false,
				isChanquan: true,
				type: 1,
				fangzutiaojiList: [],
				jiegouList: [],
				dimianList: [],
				neiqiangList: [],
				dingpengList: [],
				menchuangList: [],
				shebeiList: [],
				loucengList: [],
				caoxiangList: [],
				dijiList: [],
				zaopenList: []
			}
		},

		computed: {},
		mounted() {
			// 遍历字典
			this.chanyeList = JSON.parse(localStorage.getItem('chanye'))
			this.chanyeList.forEach((item, index) => {
				if (item.classname == '房租调剂表') {
					this.fangzutiaojiList = item.classmidList
					this.fangzutiaojiList.forEach((it, idx) => {
						if (it.classmid == '结构') {
							this.jiegouList = it.classdetailList
						} else if (it.classmid == '地面') {
							this.dimianList = it.classdetailList
						} else if (it.classmid == '内墙') {
							this.neiqiangList = it.classdetailList
						} else if (it.classmid == '顶棚') {
							this.dingpengList = it.classdetailList
						} else if (it.classmid == '门窗') {
							this.menchuangList = it.classdetailList
						} else if (it.classmid == '设备') {
							this.shebeiList = it.classdetailList
						} else if (it.classmid == '楼层') {
							this.loucengList = it.classdetailList
						} else if (it.classmid == '朝向') {
							this.caoxiangList = it.classdetailList
						} else if (it.classmid == '地级') {
							this.dijiList = it.classdetailList
						} else if (it.classmid == '澡盆') {
							this.zaopenList = it.classdetailList
						}
					})
				}
			})

			if (this.roomid) {
				localStorage.setItem('roomid', this.roomid)
				let data = {
					RoomID: this.roomid
				}
				roomDetails(data).then(res => {
					this.listQuery = res.data
					this.listQuery.basescore = 100
					this.listQuery.unitvalue = 0.0241
					console.log(this.listQuery)
				})
			}

			if (localStorage.getItem('zhuzaizujing')) {
				this.listQuery = JSON.parse(localStorage.getItem('zhuzaizujing'))
			}

			setTimeout(() => {
				this.allSum()
			}, 500)
		},
		methods: {
			allSum() {
				let listQuery = this.listQuery
				listQuery.unitscore = 100 + Number(listQuery.structurescore) + Number(listQuery.facilityscore) +
					Number(listQuery.groundscore) + Number(listQuery.floorscore) + Number(listQuery.wallscore) +
					Number(listQuery.facingdirectionscore) + Number(listQuery.roofscore) +
					Number(listQuery.livingaddresslevelscore) + Number(listQuery.doorwinscore) +
					Number(listQuery.bathtubscore)
				this.listQuery.unitscore = listQuery.unitscore

				this.listQuery.unitrentprice = Number(this.listQuery.unitscore) * Number(this.listQuery.unitvalue)
				let jibenxinxi = JSON.parse(localStorage.getItem('jibenxinxi'))
				this.listQuery.rentprice = (Number(this.listQuery.unitrentprice) * Number(jibenxinxi.rentarea)).toFixed(1)
				this.$forceUpdate();
				console.log(this.listQuery.unitrentprice, Number(this.listQuery.unitscore), Number(this.listQuery.unitvalue))
			},
			resetForm(val) {
				console.log("1");
				this.$refs[val].resetFields();
			},
			handleAddUser() {
				let data = {
					structurescore: this.listQuery.structurescore,
					structure: this.listQuery.structure,
					facilityscore: this.listQuery.facilityscore,
					facility: this.listQuery.facility,
					basescore: this.listQuery.basescore,
					groundscore: this.listQuery.groundscore,
					ground: this.listQuery.ground,
					floorscore: this.listQuery.floorscore,
					floor: this.listQuery.floor,
					unitscore: this.listQuery.unitscore,
					wallscore: this.listQuery.wallscore,
					wall: this.listQuery.wall,
					facingdirectionscore: this.listQuery.facingdirectionscore,
					facingdirection: this.listQuery.facingdirection,
					unitvalue: this.listQuery.unitvalue,
					roofscore: this.listQuery.roofscore,
					roof: this.listQuery.roof,
					livingaddresslevelscore: this.listQuery.livingaddresslevelscore,
					addresslevel: this.listQuery.addresslevel,
					unitrentprice: this.listQuery.unitrentprice,
					doorwinscore: this.listQuery.doorwinscore,
					doorwin: this.listQuery.doorwin,
					bathtubscore: this.listQuery.bathtubscore,
					bathtub: this.listQuery.bathtub,
					rentprice: this.listQuery.rentprice,
					roomid: localStorage.getItem('roomid')
				}
				console.log(this.blockType)
				if (this.blockType == 2) {
					updRoom(data).then(res => {
						console.log(res)
						this.$message(res.message);
					})
				} else {
					addRoom(data).then(res => {
						console.log(res)
						this.$message(res.message);
					})
				}
			},
			returns() {
				this.$router.go(-1)
			},
			// 选择类型
			selectButton(type) {
				this.type = type
			},
			jiegouChange(e) {
				this.listQuery.structure = e.detail
				this.listQuery.structurescore = e.value
				this.allSum()
			},
			shebeiChange(e) {
				this.listQuery.facility = e.detail
				this.listQuery.facilityscore = e.value
				this.allSum()
			},
			dimianChange(e) {
				this.listQuery.ground = e.detail
				this.listQuery.groundscore = e.value
				this.allSum()
			},
			loucengChange(e) {
				this.listQuery.floor = e.detail
				this.listQuery.floorscore = e.value
				this.allSum()
			},
			neiqiangChange(e) {
				this.listQuery.wall = e.detail
				this.listQuery.wallscore = e.value
				this.allSum()
			},
			caoxiangChange(e) {
				console.log(e)
				this.listQuery.facingdirection = e.detail
				this.listQuery.facingdirectionscore = e.value
				this.allSum()
			},
			dingpengChange(e) {
				this.listQuery.roof = e.detail
				this.listQuery.roofscore = e.value
				this.allSum()
			},
			dijiChange(e) {
				this.listQuery.addresslevel = e.detail
				this.listQuery.livingaddresslevelscore = e.value
				this.allSum()
			},
			menchaungChange(e) {
				this.listQuery.doorwin = e.detail
				this.listQuery.doorwinscore = e.value
				this.allSum()
			},
			zaopenChange(e) {
				this.listQuery.bathtub = e.detail
				this.listQuery.bathtubscore = e.value
				this.allSum()
			}

		},
		beforeDestroy() {
			let data = {
				structurescore: this.listQuery.structurescore,
				structure: this.listQuery.structure,
				facilityscore: this.listQuery.facilityscore,
				facility: this.listQuery.facility,
				basescore: this.listQuery.basescore,
				groundscore: this.listQuery.groundscore,
				ground: this.listQuery.ground,
				floorscore: this.listQuery.floorscore,
				floor: this.listQuery.floor,
				unitscore: this.listQuery.unitscore,
				wallscore: this.listQuery.wallscore,
				wall: this.listQuery.wall,
				facingdirectionscore: this.listQuery.facingdirectionscore,
				facingdirection: this.listQuery.facingdirection,
				unitvalue: this.listQuery.unitvalue,
				roofscore: this.listQuery.roofscore,
				roof: this.listQuery.roof,
				livingaddresslevelscore: this.listQuery.livingaddresslevelscore,
				addresslevel: this.listQuery.addresslevel,
				unitrentprice: this.listQuery.unitrentprice,
				doorwinscore: this.listQuery.doorwinscore,
				doorwin: this.listQuery.doorwin,
				bathtubscore: this.listQuery.bathtubscore,
				bathtub: this.listQuery.bathtub,
				rentprice: this.listQuery.rentprice,
				roomid: localStorage.getItem('roomid')
			}
			localStorage.setItem('zhuzaizujing', JSON.stringify(data))
		}
	};

	
</script>

<style scoped>
	.headTop {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.xinxi {
			display: flex;
			width: 800px;
		}
	}

	.el-form-item {
		justify-content: start !important;
	}

	.el-select {
		width: 180px;
	}

	.el-input {
		width: 180px;
	}

	.el-date-picker {
		width: 180px;
	}

	.bottomTop {
		width: 100%;
		display: flex;
		justify-content: end;
	}

	.tabButton {
		background: #eff2f7;
		color: #333333;
		border: none;
	}
</style>